<template>
	<view class="tui-tabbar footbar-bg">
		<block v-for="(item,index) in tabbar" :key="index">
			<view class="tui-tabbar-item" :class="[currentNum==index?'tui-item-active':'']" @tap="tabbarSwitch(index)">
				<view class="tui-icon-box">
					<view class="foot-iconfont" :class="[item.icon,skinStyle=='skinStyle1'?'iconfont':'t-icon']"></view>
				</view>
				<view class="tui-scale">{{item.text}}</view>
			</view>
		</block>
	</view>
</template>
<script>
	export default {
		name:'footBar',
		props:{
			current:{
				type:Number,
				default:0,
			},
			skinStyle:{
				type:String,
				default:'skinStyle1'
			},
			tabbar: {
				type:Array,
				default:[{
					icon: 'iconshouyehome',
					text: "服务下单"
				}
				, {
					icon: 'icon2',
					text: "我的订单"
				}
				, {
					icon: 'iconwode',
					text: "我的信息"
				}]
			}
		},
		data(){
			return{
				currentNum:this.current,
				userLoginClick: false,
			}
		},
		mounted() {
		},
		onLoad() {
		},
		computed:{
		},
		methods:{
			tabbarSwitch(index) {
				console.log(index)
			}
		}
	}
</script>
<style lang="scss">
	.tui-icon-box {
		position: relative;
	}
	.tui-tabbar-item {
		flex: 1;
		width: 25%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
		font-size: 26rpx;
		color: #666;
		height: 76rpx;
		margin:12rpx 0;
	}
	.foot-iconfont{
		font-size: 40rpx;
	}
	.tui-scale {
		font-size: 22rpx;
		margin-top: -6rpx;
	}
	.margin-l{
		margin-left:6rpx;
	}
	.t-icon{
		width: 50rpx;
		height: 50rpx;
	}
</style>